<template>
    <div class="link_list">
        <HeadTemplate> </HeadTemplate>
        <div class="article_box">
            <ul class="aricle_list">
                <li
                    class="item_li"
                    v-for="(val, i) in list"
                    v-bind:key="i"
                >
                    <span
                        class="list_time"
                        v-text="$utils.formatTime (val.create_at)"
                    > </span>
                    <router-link
                        class="bl_link"
                        :to="'/content/'+val.id"
                    >
                        {{val.title}}
                    </router-link>
                </li>
            </ul>
        </div>
        <FootTemplate> </FootTemplate>
    </div>
</template>


<script>
    import HeadTemplate from './../components/header.vue';
    import FootTemplate from './../components/footer.vue';

    export default {
        components: {HeadTemplate, FootTemplate},
        data() {
            return {
                list: []
            }
        },

        created() {
            this.getData();
        },

        methods: {
            getData() {
                this.$api.get('topics', null, r => {
                    this.list = r.data;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .link_list {

        .aricle_list {
            width: 100%;
            overflow: hidden;
            .list_time {
                float: left;
                width: 180px;
                padding-left: 20px;
                text-align: left;
                height: 32px;
                line-height: 32px;
                color: #666;
            }

            .bl_link {
                display: block;
                overflow: hidden;
                zoom: 1;
                height: 32px;
                line-height: 32px;
                color: #333;
                text-decoration: none;
                &:hover {
                    color: blue;
                    text-decoration: none;
                }
            }
        }
    }
</style>